<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      Vue3中，有两个 组合式API 
        ref
          一般用来接收一个基本数据类型，将其转换成响应式的。
          也可以接收对象或数组，内部使用了 reactive 对其处理
          响应式原理：ES5 Object.definedProperty
          不能直接去修改。js部分的操作，需要 .value
        reactive
          主要用来处理将复杂数据类型(对象、数组)转换成响应式
          响应式原理：ES6 proxy 代理
          不能直接去修改
          reactive数据的属性可以是 ref 数据，这样的话，会自动解包

     -->
    <div id="app">
      <h2>{{ state.name }}</h2>
      <h2>{{ state.age }}</h2>

      <button @click="fn1">点我，修改 state</button>
    </div>

    <script src="./lib/vue.global.js"></script>
    <script>
      const { ref, reactive } = Vue;

      Vue.createApp({
        setup() {
          const count = ref(0);

          const refObj = ref({
            name: "张三",
            age: 18,
          });

          const state = reactive({
            name: "张三",
            age: 18,
            count: count,
          });

          console.log("count", count);
          console.log("refObj", refObj);
          console.log("state", state);

          function fn1() {
            // state = reactive({
            //   name: "里斯",
            //   age: 20,
            // });
            // state.name = "里斯";

            // 输出 state.count 的值
            // console.log(state.count);

            // 对 state.count 做赋值，也能触发 count 这个 ref 的修改
            // state.count = 100;
            count.value = 100;
            console.log(state, count);
          }

          return {
            state,
            fn1,
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>
